![BD TECH INFO [প্রযুক্তির তথ্য ও সহায়তা]](https://blogger.googleusercontent.com/img/a/AVvXsEgWTBLcpjohbIaeNsN7xjsbqLIBhermE67EtYt-QgXDHbJdruZRXJ4HzXJ9N2-KkpvkO0lk0BvIo9GK7tCXZOVW9mMsAvQ8uVTUcWkOvfTBJI5wkM-vWdRNziyJi_LlbUD_xdWY4Txj9_fUukRiNmW7kcM5RjNH_a3XYdPwjlucXZcld5A7mjE96Wf1CIo=s257)
![BD TECH INFO [প্রযুক্তির তথ্য ও সহায়তা]](https://blogger.googleusercontent.com/img/a/AVvXsEg_l9Us23e5xequPcGYeYsGJxuAKiipoIXzq-te1kzV5Zs15MXfJjYWyGyEICom4Hcc5FzKZTGcHGu2Zdr0XdQ3ez_Bqgd6FEVXWLYomaJXRaXTbjjSVyFlTm3JniBrdJuaPv8VuA6I1z091xpxGutmS-m1H95abKhfxGf70BaoS3wmvNyoQOAXScHU=s324)
কিভাবে HTML CSS ব্যবহার করে Collapsible Section Create করবেন?
কিভাবে HTML CSS ব্যবহার করে আপনার ওয়েবসাইটে Collapsible Section Create করবেন?
আমি ইউজার ইন্টারফেস (UI) তৈরি করতে পছন্দ করি এবং প্রায়শই প্রসারিত করার জন্য একটি বিভাগ প্রয়োজন এবং উদাহরণস্বরূপ FAQ বিভাগ। আমি NPM-এর সাথে যোগাযোগ করব এবং সাহায্য করার জন্য একটি লাইব্রেরি ইনস্টল করব, যতক্ষণ না আমি আবিষ্কার করি যে আপনি বিশুদ্ধ HTML উপাদানগুলির সাথে এটি করতে পারেন! তাদের সম্ভবত সবচেয়ে স্পষ্টভাবে নাম দেওয়া হয়নি:
Steps To How To Create A Collapsible Section....
আমরা খুব কম HTML কোড নিয়ে কাজ করব। আপনার সুবিধার জন্য কোলাপসিবল সেকশন তৈরি করতে HTML কোড নিচে দেওয়া হল।
<details>
<summary>
<span class="icon_border"><span class="icon"> ⏏ </span> </span>
User Group Create Table SQL Code And SQL Code To Insert Some Data !!
</summary>
<div class="collapsible-content">
<div class="content-inner">
<p>
Quint Is A Call To One Of The JavaScript Embedded Objects, And The Fast JavaScript Program Can Also Be Used Its Beautiful, Well-written, And Functional Applications Using JS, HTML Pages Modernize Is A Popular Browser Externally Plug-ins. Test Driven Development.
</p>
</div>
</div>
</details> details {
user-select: none;
margin: 1.2rem 0;
}
details .collapsible-content .content-inner {
background: rgba(0, 105, 255, .2);
border-bottom: 1px solid rgba(0, 105, 255, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0.5rem 1rem;
font-family: Inter, sans-serif;
font-size: 16px;
color: black;
line-height: 1.5;
}
details>summary span.icon {
transition: all 0.3s;
transform: rotate(450deg);
}
details[open] summary span.icon {
transform: rotate(540deg);
}
summary {
display: flex;
font-weight: bold;
font-family: Inter, sans-serif;
font-size: 18px;
/* text-transform: uppercase; */
text-align: center;
padding: 8px;
color: #fff;
background: #ab1010;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out;
align-items: center;
}
summary::-webkit-details-marker {
display: none;
}
.icon_border {
padding: 4px 6px 5px 6px;
/* position: absolute; */
outline: 0;
border-radius: 50%;
background: #2ab29b;
margin-right: 15px;
margin-left: 15px;
}
.icon {
flex-shrink: 0;
display: inline-block;
background-position: center;
} এখন আমরা সম্পূর্ণ HTML CSS কোড একসাথে ব্যবহার করব।
<!--DOCTYPE html-->
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
details {
user-select: none;
margin: 1.2rem 0;
}
details .collapsible-content .content-inner {
background: rgba(0, 105, 255, .2);
border-bottom: 1px solid rgba(0, 105, 255, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0.5rem 1rem;
font-family: Inter,sans-serif;
font-size: 16px;
color: black;
line-height: 1.5;
}
details>summary span.icon {
transition: all 0.3s;
transform: rotate(450deg);
}
details[open] summary span.icon {
transform: rotate(540deg);
}
summary {
display: flex;
font-weight: bold;
font-family: Inter,sans-serif;
font-size: 18px;
/* text-transform: uppercase; */
text-align: center;
padding: 8px;
color: #fff;
background: #ab1010;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out;
align-items: center;
}
summary::-webkit-details-marker {
display: none;
}
.icon_border {
padding: 4px 6px 5px 6px;
/* position: absolute; */
outline: 0;
border-radius: 50%;
background: #2ab29b;
margin-right: 15px;
margin-left: 15px;
}
.icon {
flex-shrink: 0;
display: inline-block;
background-position: center;
}
</style>
<title></title>
</head>
<body>
<details>
<summary>
<span class="icon_border"><span class="icon">⏏</span></span> User Group Create Table SQL Code And SQL Code To Insert Some Data !!
</summary>
<div class="collapsible-content">
<div class="content-inner">
<p>Quint Is A Call To One Of The JavaScript Embedded Objects, And The Fast JavaScript Program Can Also Be Used Its Beautiful, Well-written, And Functional Applications Using JS, HTML Pages Modernize Is A Popular Browser Externally Plug-ins. Test Driven Development.</p>
</div>
</div>
</details>
</body>
</html> আপনি যখন সম্পূর্ণ HTML CSS কোড চালু করবেন তখন নিচের ছবির মত একটি ওভারভিউ পাবেন।
সারসংক্ষেপ-
সংক্ষেপে, একটি প্রসারিত এবং ভেঙে পড়া বিভাগ তৈরি করতে ব্রাউজারগুলি আপনাকে যা দেয় তা আপনি ব্যবহার করতে পারেন। এটি সমস্ত ব্যবহারকারীর জন্য অ্যাক্সেসযোগ্য হবে কারণ এটি শব্দার্থিক HTML। এটি লোড করা খুব দ্রুত হবে কারণ শুধুমাত্র HTML এবং CSS এর কয়েকটি লাইন রয়েছে। শুধু তাই নয়, এটি যেকোন স্ক্রিন সাইজের জন্য প্রতিক্রিয়াশীল হবে।
🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo
I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================
🙍🏾 Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel
Many thanks for visiting the site.
Then Enjoy.........................
0 Comments